<template>
	<view class="downbox">
		<view class="downbox-tit">
			<view class="bj_left">
				<image src="/static/gc/sl.png" class="downbox-tit-logo" mode=""></image>
				<view style="width: 484rpx;">
					<view class="f36 fwb">
						{{$t("down.tit1")}}
					</view>
					<view class="f24 c9c">
						{{$t("down.txt1")}}
					</view>
				</view>
			</view>
			<view class="downbox-tit-btnb">
				<image src="/static/gc/s1.png" mode=""></image>
				<image src="/static/gc/s2.png" @click="clgc"></image>
			</view>
		</view>
		<view class="downbox-info">
			<view class="tc mb30">
				<view class="f32 fwb mb20">
					{{$t("down.tit2")}}
				</view>
				<view class="c9c f26" v-html="$t('down.txt2')"></view>
			</view>
			<view class="downbox-info-btn bj_center fwb mb30">
				<image src="/static/gc/d1.png" class="downbox-info-btn-di" mode=""></image>
				<text>{{$t("down.btn1")}}</text>
				<text>{{$t("menu.$")}}</text>
				<text>3</text>
				<text>~</text>
				<text>{{$t("menu.$")}}</text>
				<text>7,777</text>
			</view>
			<view class="f32 fwb">
				{{$t("down.tit3")}}
			</view>
			<view class="c9c f26 mb10" v-html="$t('down.txt3')"></view>

			<view class="downbox-stb">
				<view class="bj_left mb10">
					<image src="/static/gc/s3.png" class="downbox-stb-gt"></image>
					<view class="f26 ca2 fwb">
						{{$t("down.tit4")}}
					</view>
				</view>
				<view class="f26 ca2" v-html="$t('down.txt4')"></view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	// 获取父级可调用的方法
	const clgc = inject("clgc");
</script>

<style scoped lang="scss">
	.downbox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;

		&-tit {
			background: #003311;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			padding: 48rpx 68rpx 48rpx 34rpx;
			position: relative;

			&-logo {
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
				margin-right: 30rpx;
			}

			&-btnb {
				position: absolute;
				top: 26rpx;
				right: 32rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-left: 20rpx;
				}
			}
		}

		&-info {
			background: #0F194D;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 44rpx 40rpx;

			&-btn {
				height: 88rpx;
				background: linear-gradient(180deg, #50B6E9 0%, #105FD6 100%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				&-di {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
					font-weight: bold;
					font-size: 30rpx;
				}
			}
		}

		&-stb {
			background: #132D71;
			border-radius: 12rpx;
			padding: 16rpx;

			&-gt {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>